// 公共短视频列表

const app = getApp()

import {
  getSwiperList,
} from '../../api/douyin'

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 搜索项
    search: {
      direction: 'down', // up.向上搜索 down.向下搜索
      minpage: 1, // 最小页码
      maxpage: 1, // 最大页码
      limit: 15, // 搜索长度
      order: '', // 排序方式
      label_type: 'radio', // 标签类型 union.并集 intersection.交集 radio.单选 empty_label.空标签 all.全部
      labels: ['铁骨曾曾'], // 标签组
    },

    hasMore: true, // 是否有更多内容
    list: [], // 视频列表
    loading: false, // 加载中

    // Drawer选择排序
    drawerSidebar: [{
        title: '发布时间倒序',
        value: 'publishtimedesc',
        icon: "circle",
      },
      {
        title: '发布时间正序',
        value: 'publishtimeasc',
        icon: 'circle',
      },
      {
        title: '添加时间倒序',
        value: 'createtimedesc',
        icon: "circle",
      },
      {
        title: '添加时间正序',
        value: 'createtimeasc',
        icon: "circle",
      },
      {
        title: '喜欢数正序',
        value: 'diggcountasc',
        icon: "circle",
      },
      {
        title: '喜欢数倒序',
        value: 'diggcountdesc',
        icon: "circle",
      },
      {
        title: '评论数正序',
        value: 'commentasc',
        icon: "circle",
      },
      {
        title: '评论数倒序',
        value: 'commentdesc',
        icon: "circle",
      },
      {
        title: '分享数正序',
        value: 'shareasc',
        icon: "circle",
      },
      {
        title: '分享数倒序',
        value: 'sharedesc',
        icon: "circle",
      },
    ],
    drawerVisible: false, // 是否打开排序弹窗
    drawerOrder: {}, // 页面排序信息

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 初始化项目排序
    this.handleDrawPXInit()
    // 获取视频列表
    this.getList()
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.setData({
      'search.minpage': 1,
      'search.maxpage': 1,
      hasMore: true,
      list: [],
    })
    this.getList()
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if (this.data.hasMore) {
      this.data.search.maxpage++
      this.getList()
    }
  },

  // 监听页面滚动 - 显示返回顶部按钮
  onPageScroll(e) {
    // 把距离顶部的距离实时同步给返回顶部按钮组件
    this.selectComponent('#btnBackTop').onPageScroll(e.scrollTop)
  },

  // ##################################################
  // # 选择排序方式功能
  // ##################################################

  // 初始化项目排序
  handleDrawPXInit() {
    let porder = wx.getStorageSync("dataInitItemOrder")
    if (!porder)
      porder = 'publishtimedesc'
    this.data.search.order = porder

    // 1、给当前排序方式的项目添加一个对号 2、找到当前排序方式的名称
    let plabel = ''
    let sidebar = this.data.drawerSidebar
    sidebar.forEach((it, i) => {
      if (it.value == porder) {
        it.icon = 'check-circle'
        plabel = it.title
      }
    })

    this.setData({
      drawerSidebar: sidebar,
      drawerOrder: {
        order: porder,
        title: plabel,
      }
    })
  },

  // 打开排序弹窗
  // handleOpenDrawPX() {
  //   this.setData({
  //     drawerVisible: true,
  //   })
  // },

  // Drawer选项点击
  onDrawItemClick(e) {
    const index = e.detail.sibarItem.index
    const item = e.detail.sibarItem.item
    this.data.search.order = item.value

    let sidebar = this.data.drawerSidebar
    sidebar.forEach((it, i) => {
      it.icon = 'circle'
    })
    sidebar[index].icon = 'check-circle'

    wx.setStorageSync("dataInitItemOrder", item.value)

    this.setData({
      drawerSidebar: sidebar,
      drawerOrder: {
        order: item.value,
        title: item.title,
      }
    })
  },

  // Drawer遮罩层点击关闭抽屉
  onDrawOverlayClick(e) {
    this.setData({
      'search.minpage': 1,
      'search.maxpage': 1,
      hasMore: true,
      list: [],
    })
    this.getList()
  },

  // ##########################################################################################
  // # 页面基础功能
  // ##########################################################################################

  // 查看视频
  onVideoClick(event) {
    // 当前选中的视频坐标
    const index = event.currentTarget.dataset.index

    // 刷视频页面信息记入缓存
    wx.setStorageSync("dataSwiperPlay", {
      page: this.data.list[index].page, // 最大ID
      limit: this.data.search.limit, // 搜索长度
      order: this.data.search.order, // 排序方式
      label_type: this.data.search.label_type, // 标签类型
      labels: this.data.search.labels, // 标签
      videoId: this.data.list[index].id,
    })

    app.navigationTo("packagedouyin/pages/play/play")
  },

  // ##########################################################################################
  // # 接口访问 方法
  // ##########################################################################################

  // 获取视频列表
  getList() {
    this.setData({
      loading: true
    })
    // console.log('getList', this.data.search)
    getSwiperList(this.data.search).then(res => {
      if (res.status === 200) {
        const count = res.data.list.length
        const list = res.data.list
        if (count) {
          for (let i = 0; i < count; i++)
            this.data.list.push(list[i])
          this.setData({
            list: this.data.list,
          })
        } else {
          this.setData({
            hasMore: false, // 没有更多内容了
          })
        }
      } else {
        app.showToast(res.msg)
      }
      this.setData({
        loading: false
      })
      wx.stopPullDownRefresh()
    })
  },

  // ##########################################################################################

})